<template>
  <div id="app">
    <div class="tab">
      <nav-menu></nav-menu>
    </div>
    <top-swiper-img></top-swiper-img>

    <keep-alive :exclude="['Consultation_WeChatNews', 'Consultation_WeChatNews', 'Horizontal', 'Birthland', 'HotelDetail', 'SightseeingTourSecondary', 'Consultation_detail', 'Forum', 'ForumDetails']">
      <router-view/>
    </keep-alive>

    <footer-mo></footer-mo>
    <div class="toTop">
      <img @click="toTop" class="toHome" :src="require('_as/to-top.png')" alt="">
      <span class="contenSpan" @click="toHome">回到主页</span>
    </div>
  </div>
</template>

<script>
import NavMenu from '_c/navMenu/navMenu'
import FooterMo from '_c/footerMo/footerMo'
import topSwiperImg from '_c/topSwiperImg/top_swiper_img'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {}
  },
  components: {
    NavMenu,
    FooterMo,
    topSwiperImg
  },
  methods: {
    toTop () {
      // console.log(window.currentY)
      // window.scrollTo({
      //   top: 0,
      //   left: 0,
      //   behavior: 'smooth'
      // })
      // ---------------------------------------------------------------
      let needScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
      scrollAnimation(needScrollTop, 0)
      // ---------------------------------------------------------------
      // let needScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
      // setTimeout(() => {
      //   const dist = Math.ceil(needScrollTop / 1.1)
      //   const changeY = 0 + dist
      //   window.scrollTo(0, dist)
      //   // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
      //   if (needScrollTop > 10 || needScrollTop < -10) {
      //     this.scrollAnimation(0, changeY)
      //   }
      // }, 20)
      // --------------------------------------------------------------------
    },
    toHome () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin 0 auto
.tab {
  margin-top 0px
  position fixed
  top 0
  left 0
  right 0
  z-index 601
}
.toTop {
  position fixed
  bottom 210px
  right 40px
  z-index 506
  display flex
  flex-direction column
  justify-content center
  align-items center
  .toHome {
    width 54px
    height 54px
  }
  .contenSpan {
    font-size 14px
    width 30px
    height 40px
    line-height 20px
    padding 5px
    margin-top 10px
    cursor pointer
    background #58C2DF
    color #fff
  }
}
</style>
